<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>

</head>

<body>
<div id="app" class="login_container">
    <div style="width: 350px;height: 500px;position: relative;left: 582px;top: 50px;">


        <el-form :rules="addFormRules" label-width="80px" :model="addForm" ref="addFormRef">

            <el-upload
                    style="position: relative;top: 9px;left: 9px; border:1px solid #bcbec2; width: 100px;height: 100px;margin-left: 153px;margin-bottom: 20px;"

                    class="avatar-uploader"
                    action="/upload/up"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl1" :src="imageUrl1" class="avatar" width="100px" height="100px">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="margin-left: 38px;
margin-top: 41px;"></i>
            </el-upload>

            <el-form-item label="账号" prop="username">
                <el-input v-model="addForm.username"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password"></el-input>
            </el-form-item>


            <el-form-item label="性别" prop="sex" :data="SexAll">
                <el-select :popper-append-to-body="false"
                           v-model="addForm.sex" placeholder="请选择性别" style="width: 100%">
                    <el-option
                            v-for="item in SexAll"
                            :key="item.id"
                            :label="item.name"
                            :value="item.sex">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="真实姓名" prop="realname">
                <el-input v-model="addForm.realname"></el-input>
            </el-form-item>

            <el-form-item label="年龄" prop="age">
                <el-input v-model="addForm.age"></el-input>
            </el-form-item>

            <el-form-item class="btns">
                <el-button type="primary" v-bind:disable="dis" @click="login" :loading="loginLoading">注册</el-button>
                <el-button type="info" @click="resetloginForm">清除</el-button>
                <el-button type="success" @click="dl">有号登录</el-button>
            </el-form-item>

        </el-form>


    </div>
</div>

</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            SexAll: [],
            // 登录限制，防止重复提交
            loginLoading: false,
            addForm: {
                dis: "false",
                // 登录的表单数据的绑定对象
                username: "",
                password: "",
                age: "",
                sex: "",
                realname: "",
            },
            addFormRules: {
                // 验证用户名是否合法
                realname: [
                    // 第一个参数表示必填项 如果没有符合要求就会输出message的信息  trigger: 'blur'表示鼠标离开后验证
                    {required: true, message: '', trigger: 'blur'},
                    {min: 2, max: 15, message: '长度在 2 到 15个字符', trigger: 'blur'},
                    {pattern: /[\u4e00-\u9fa5]/, message: '姓名只能是中文', trigger: 'blur'}
                ],
                // 验证密码是否合法
                password: [
                    {required: true, message: '', trigger: 'blur'},
                    {min: 6, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur'},
                    {pattern: /^[A-Za-z0-9]+$/, message: '只能输入数字、字母', trigger: 'blur'}],

                username: [
                    {required: true, message: '', trigger: 'blur'},
                    {len: 11, message: '请输入正确手机号码', trigger: 'blur'},
                    {pattern: /^1[345678]\d{9}$/, message: '请输入正确手机号码', trigger: 'blur'}
                ],
                age: [
                    {required: true, message: '', trigger: 'blur'},
                    {pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/, message: '年龄不合法', trigger: 'blur'}
                ],
                sex: [
                    {required: true, message: '', trigger: 'blur'},
                    {pattern: /^男$|^女$/, message: '性别不合法', trigger: 'blur'}

                ],
            }
        },

        created() {
            this.intosex();
        },
        methods: {
            //性别
            intosex() {
                axios.get("/sex/all").then(resp => {

                    if (resp.data.code === 200) {
                        this.SexAll = resp.data.data
                    }
                })
            },
            name(loginForm) {

            },
            dl(){
                location.href = "/login.jsp";
            },
            resetloginForm() {
                // 点击重置按钮,重置登录表单
                // this.$refs[loginFormRef].resetFields()
                this.$refs.addFormRef.resetFields()
            },
            login() {
                this.loginLoading = true
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) {
                        return (this.loginLoading = false)
                    }
                    axios.post("/user/add", this.addForm).then(result => {
                        if (result.data.code !== 200) {
                            this.loginLoading = false;
                            return this.$message.error("注册失败!");
                        }
                        this.$message.success('注册成功!')
                        location.href = "/login.jsp";
                        this.loginLoading = false;
                    })
                })
            }
        },
    })
</script>
<style>

    body {
        width: 100%;
        height: 100%;
        background: url('/imgs/userReg.jpg') no-repeat;
        background-size: 100%;
    }

    .login_box {
        width: 30%;
        height: 500px;
        margin-left: 740px;
        margin-top: 7%;
        text-align: center;
        border-radius: 10px;
        padding: 30px 30px;
        color: #0F0F0F;


    }

    input {
        border: 0;
        width: 60%;
        font-size: 15px;
        color: #0F0F0F;
        padding: 5px 10px;
        border-radius: 10px;

    }



    #zt {
        color: #0F0F0F;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "华文行楷", Arial, sans-serif;
        font-size: 60px;
        margin-left: 0px;
        margin-top: -55px;
        margin-bottom: 0;
    }

</style>
</html>
